<script setup lang="ts">
import { ref } from "vue";
import TnIcon from '@tuniao/tnui-vue3-uniapp/components/icon/src/icon.vue';
import { onLoad } from "@dcloudio/uni-app";
import { projectIdApi } from "@/api/home";
import { orderStatus } from "@/utils/constants";
import CustomNavBar from "@/composables/header/index.vue";
type detailData = {
  orderPayStatus: number;
  title: string;
  totalPrice: number;
  advancePrice: number;
  depositPaymentTime: string;
  balancePayment: number;
  balancePaymentTime: string;
  groupFree: number;
  platformFee: number;
  prepay: number;
  agentFee: number;
  pendingSettlement: number;
  projectEndTime: string;
  realTotalPrice: number;
  projectSubList: Array<{
    title: string;
  }>;
}
const detailData = ref<detailData>({
  orderPayStatus: 0,
  title: "",
  totalPrice: 0,
  realTotalPrice: 0,
  advancePrice: 0,
  prepay: 0,
  pendingSettlement: 0,
  depositPaymentTime: "",
  balancePayment: 0,
  balancePaymentTime: "",
  groupFree: 0,
  platformFee: 0,
  agentFee: 0,
  projectEndTime: "",
  projectSubList: []
})
const getData = async (id: string) => {
  const res = await projectIdApi(id);
  debugger
  detailData.value = res?.data || {};
}
onLoad((options) => {
  console.log(options, "options", "------------");
  // 模拟数据
  getData(options?.id || "");
})
</script>

<template>
  <view>
    <view class="header-status">{{ orderStatus?.[detailData?.orderPayStatus] || "" }}</view>
    <view class="header-status">
      <view>{{detailData.title}}</view>
      <view class="status-text">
<!--        订单详情-->
<!--        <TnIcon name="right"></TnIcon>-->
      </view>
    </view>
    <view class="trade-detail">
      <view class="trade-box">
        <view class="left-text">订单总价</view>
        <view class="right-text">￥{{detailData.totalPrice}}</view>
      </view>
      <view class="trade-box">
        <view class="left-text">一期结算</view>
        <view class="right-text">￥{{detailData.prepay}}</view>
      </view>
<!--      <view class="trade-box">-->
<!--        <view class="left-text">一期结算时间</view>-->
<!--        <view class="right-text">{{detailData.depositPaymentTime}}</view>-->
<!--      </view>-->
      <view class="trade-box">
        <view class="left-text">二期结算</view>
        <view class="right-text">￥{{detailData.pendingSettlement}}</view>
      </view>
<!--      <view class="trade-box">-->
<!--        <view class="left-text">二期结算时间</view>-->
<!--        <view class="right-text">{{detailData.balancePaymentTime}}</view>-->
<!--      </view>-->
      <view class="trade-box">
        <view class="left-text">团购优惠</view>
        <view class="right-text">￥{{detailData.groupFree}}</view>
      </view>
      <view class="trade-box">
        <view class="left-text">平台服务费</view>
        <view class="right-text">￥{{detailData.platformFee}}</view>
      </view>
      <view class="trade-box">
        <view class="left-text">代理抽成</view>
        <view class="right-text">￥{{detailData.agentFee}}</view>
      </view>
      <view class="trade-box">
        <view class="left-text">订单结束时间</view>
        <view class="right-text">{{detailData.projectEndTime}}</view>
      </view>
    </view>

    <view class="trade-detail" v-if="detailData.projectSubList?.length > 0">
      <view class="tip-text">新增功能</view>
      <view class="trade-box" v-for="(item, index) in detailData.projectSubList" :key="index">
        <view class="left-text">{{item.title}}</view>
        <view class="right-text">￥{{item.totalPrice}}</view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.header-status {
  width: calc(100% - 64rpx);
  margin-left: 32rpx;
  height: 120rpx;
  line-height: 120rpx;
  border-radius: 8px;
  background: #FFFFFF;
  margin-top: 24rpx;
  font-size: 32rpx;
  font-weight: 500;
  color: #333333;
  padding: 0 40rpx;
  display: flex;
  justify-content: space-between;
  .status-text {
    font-size: 24rpx;
    color: #666666;
 }
}
.trade-detail {
  width: calc(100% - 64rpx);
  margin-left: 32rpx;
  padding: 40rpx;
  border-radius: 8px;
  background: #FFFFFF;
  margin-top: 24rpx;
  .tip-text {
    font-size: 32rpx;
    color: #333333;
    font-weight: 500;
    margin-bottom: 25rpx;
    border-bottom: 1px solid #D8D8D8;
    padding-bottom: 14rpx;
  }
  .trade-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 32rpx;
    .left-text {
      font-size: 24rpx;
      color: #333333;
    }
    .right-text {
      font-size: 28rpx;
      color: #999999;
    }
  }

}
</style>